/**
 * 解决类组件事件处理函数的this问题的四种方案：
 *
 *  1. 【推荐】在构造函数中统一处理 this 指向的绑定
 *  2. 【最推荐】创建事件处理函数时，使用 Public class fields + 箭头函数 语法
 *  3. 传递事件处理函数时，使用 箭头函数
 *     绑定事件时，使用一个箭头函数来作为事件处理函数，然后在这个事件处理函数中，普通调用一开始写好的函数
 *  4. 传递事件处理函数时，使用 bind 绑定 this
 */

import React from "react";

interface IState {
  count: number;
}

class App extends React.Component<any, IState> {
  constructor(props: any) {
    super(props);

    this.fn1 = this.fn1.bind(this);
    // 经过上面的代码之后，当前this上有几个 fn1
  }

  state: Readonly<IState> = {
    count: 0,
  };

  fn1() {
    console.log("fn1", this);

    this.setState((state) => ({ count: state.count + 1 }));
  }

  fn2 = () => {
    this.setState((state) => ({ count: state.count + 1 }));
  };

  fn3(event: any) {
    console.log("event", event);
    this.setState((state) => ({ count: state.count + 1 }));
  }

  fn4() {
    this.setState((state) => ({ count: state.count + 1 }));
  }

  render(): React.ReactNode {
    // console.log("App this", this);

    // this.fn1();

    return (
      <div>
        <h1>App</h1>
        <button onClick={this.fn4.bind(this)}>点我 {this.state.count}</button>
      </div>
    );
  }
}

export default App;

// const obj = {
//   fn1() {
//     console.log(this);
//   },
// };

// // 正常调用 fn1
// obj.fn1(); // obj

// // 将 obj.fn1 赋值给另一个变量
// const onClick = obj.fn1;

// // 通过 onClick 调用
// onClick(); // window undefined
